<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta name="description" content="The lightest and fastest audio streaming platform on the web.">
  <meta name="author" content="n-ce">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="white">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="keywords"
    content="ytify,yify, Ytify, Youtube, youtube, Music,music, audio,opus, 32kbps,64kbps,Free ,spotify ,streaming, music-player ,  youtube-player , free-music, ytmusic">
  <meta name="thumbnail" content="/ytify_thumbnail_min.webp">

  <!-- social media preview, more info https://ogp.me -->

  <meta property="og:type" content="website">
  <meta property="og:title" content="ytify">
  <meta property="og:url" content="https://ytify.pp.ua">
  <meta property="og:site_name" content="ytify">
  <meta property="og:description" content="48-160kbps Opus YouTube Audio Streaming Web App.">
  <meta property="og:image" content="/ytify_thumbnail_min.webp">
  <!-- tells google that this url is most important (e.g. not http (without s = secure))-->
  <link rel="canonical" href="https://ytify.pp.ua">

  <link rel="icon" type="image/png" href="/logo192.png" sizes="192x192">
  <link rel="icon" type="image/png" href="/logo512.png" sizes="512x512">
  <link rel="apple-touch-icon" href="/logo192.png">
  <link rel="icon" type="image/svg+xml" href="/ytify_lite.svg">


  <title>ytify</title>
</head>

<body>
  <audio></audio>
  <header>
    <nav>
      <a href="/" id="/" class="hide">
        <p>Home</p>
      </a>
      <a href="/upcoming" id="/upcoming">
        <i class="ri-skip-forward-line"></i>
        <p data-translation="nav_upcoming">Upcoming</p>
      </a>
      <a href="/search" id="/search">
        <i class="ri-search-2-line"></i>
        <p data-translation="nav_search">Search</p>
      </a>
      <a href="/library" id="/library">
        <i class="ri-stack-line"></i>
        <p data-translation="nav_library">Library</p>
      </a>
      <a href="/list" id="/list" class="hide">
        <p>list</p>
      </a>
    </nav>
    <div id="miniPlayer">
      <img id="img" crossorigin="anonymous" alt="Current Playing Media Thumbnail">
      <div id="mp">

        <div id="mptext">
          <a data-translation="player_now_playing" id="title" href="" target="_blank">Now Playing</a>
          <p data-translation="player_channel" id="author">Channel</p>
        </div>

        <button class="ri-stop-circle-fill" id="playButton" data-translation-aria-label="player_play_button"
          data-playbackState="none"></button>

      </div>
    </div>
  </header>
  <main>
    <section id="home">


      <div id="upperLayer">
        <!-- image -->
        <div id="meta">
          <!-- title -->
          <!-- author -->

          <div id="upperButtonLayer">
            <span id="volumeContainer">
              <label data-translation-aria-label="player_volume" for="volumeChanger" class="ri-volume-up-fill"></label>
              <input type="range" min="0" max="100" value="100" id="volumeChanger">
            </span>
            <i data-translation-aria-label="player_loop" class="ri-repeat-line" id="loopButton"></i>
            <input type="checkbox" id="favButton" />
            <label data-translation-aria-label="player_like" for="favButton" class="ri-heart-line"></label>
            <i data-translation-aria-label="player_more" class="ri-more-2-fill" id="moreBtn"></i>
          </div>
        </div>
      </div>

      <span id="trackline">
        <input type="range" value="0" id="progress" />
        <div>
          <p id="currentDuration">00:00</p>
          <p id="fullDuration">00:00</p>
        </div>
      </span>

      <div id="playerControls">
        <button data-translation-aria-label="player_play_previous" class="ri-skip-back-line"
          id="playPrevButton"></button>
        <button data-translation-aria-label="player_seek_backward" class="ri-replay-15-line"
          id="seekBwdButton"></button>

        <!-- play button -->

        <button data-translation-aria-label="player_seek_forward" class="ri-forward-15-line"
          id="seekFwdButton"></button>
        <button data-translation-aria-label="player_play_next" class="ri-skip-forward-line"
          id="playNextButton"></button>

      </div>

      <div id="playerFooter">

        <select id="playSpeed">
          <option value="0.25">0.25x</option>
          <option value="0.50">0.50x</option>
          <option value="0.75">0.75x</option>
          <option value="1.00" selected>1.00x</option>
          <option value="1.25">1.25x</option>
          <option value="1.50">1.50x</option>
          <option value="1.75">1.75x</option>
          <option value="2.00">2.00x</option>
          <option value="2.50">2.50x</option>
          <option value="3.00">3.00x</option>
          <option value="3.50">3.50x</option>
          <option value="4.00">4.00x</option>
        </select>
        <p id="qualityView"></p>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 4172 4172" width="1.5rem" height="1.5rem"
          style="transform: scale(1.5);overflow:hidden;">

          <path fill="var(--text)"
            d="m1368 3037-55-10-23-6a369 369 0 0 1-57-19 552 552 0 0 1-266-246 437 437 0 0 1-31-74 590 590 0 0 1-18-245l5-25c7-35 21-77 35-105l9-19a522 522 0 0 1 679-236c1 5-1 77-3 91a1059 1059 0 0 1-24 119 274 274 0 0 1-19 53c-1 0-7-5-14-13-40-46-95-77-160-91a290 290 0 0 0-186 542 287 287 0 0 0 202 23c61-15 120-54 159-105a1108 1108 0 0 0 149-360 1296 1296 0 0 0 27-274 1164 1164 0 0 0-226-667 146 146 0 0 1-21-39l-4-9-4-11c-8-16-18-53-24-84-5-27-5-72 0-95 10-49 32-84 69-115 24-20 50-34 87-47a740 740 0 0 1 79-19c23-4 134-6 167-3a1364 1364 0 0 1 446 118l20 8 20 8 18 8a2232 2232 0 0 1 652 439 1008 1008 0 0 1 234 338c4 5 16 57 20 83 2 17 1 63-3 79-18 83-71 135-171 167-34 11-106 20-130 16-43-7-194-7-249 0-67 9-142 23-179 34l-34 10a974 974 0 0 0-94 33 1245 1245 0 0 0-170 84 1182 1182 0 0 0-405 414 529 529 0 0 1-347 244c-40 9-112 11-160 6zm1441-892 14-2c21-2 58-13 76-22 34-17 54-37 67-69 6-16 7-19 7-44 1-26 1-28-6-54-32-125-167-280-368-420-80-56-200-124-282-159l-26-12a1286 1286 0 0 0-124-47c-39-14-128-36-170-42l-18-3c-19-3-41-4-87-4-56 0-71 2-105 13-68 23-101 65-101 130a201 201 0 0 0 17 82c3 9 21 46 31 64 68 112 187 227 351 338a1827 1827 0 0 0 446 214 1084 1084 0 0 0 219 39c1 1 50-1 59-2z" />
        </svg>
      </div>

    </section>


    <section id="upcoming">
      <ul id="queuetools"></ul>
      <div id="queuelist">
        <p data-translation="upcoming_info">The Queue is Empty.</p>
      </div>
    </section>


    <section id="search">
      <header>
        <p data-translation="nav_search">Search</p>
        <details>
          <summary><i class="ri-more-2-fill"></i></summary>
          <ul>
            <li id="settingsHandler" data-translation="nav_settings">Settings</li>
            <li><a data-translation="settings_changelog" href="https://github.com/n-ce/ytify/wiki/changelog"
                target="_blank">Changelog</a></li>
            <li><a href="https://github.com/n-ce/ytify" target="_blank">Github</a></li>
            <li><a href="https://t.me/ytifytg" target="_blank">Telegram</a></li>
            <li id="fullscreenBtn" data-translation="settings_fullscreen">Fullscreen</li>
          </ul>
        </details>
      </header>

      <form id="superInputContainer">
        <input data-translation-placeholder="search_placeholder" type="search" id="superInput" autocomplete="off" />
        <select id="searchFilters">
          <optgroup label="YouTube">
            <option data-translation="search_filter_all" value="all">All</option>
            <option data-translation="search_filter_videos" value="videos">Videos</option>
            <option data-translation="search_filter_channels" value="channels">Channels</option>
            <option data-translation="search_filter_playlists" value="playlists">Playlists</option>
          </optgroup>
          <optgroup label="YouTube Music">
            <option data-translation="search_filter_music_songs" value="music_songs">Songs</option>
            <option data-translation="search_filter_music_artists" value="music_artists">Artists</option>
            <option data-translation="search_filter_music_videos" value="music_videos">Videos</option>
            <option data-translation="search_filter_music_albums" value="music_albums">Albums</option>
            <option data-translation="search_filter_music_playlists" value="music_playlists">Playlists</option>
          </optgroup>
          <optgroup data-translation-label="search_filter_sort_by" label="Sort By">
            <option data-translation="search_filter_date" value="date">Time</option>
            <option data-translation="search_filter_views" value="views">Views</option>
          </optgroup>
        </select>
      </form>
      <ul id="suggestions"></ul>
      <div id="searchlist">
        <div align="center">
          <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 4172 4172" width="4vmin" height="4vmin"
            style="transform: scale(9); margin:14vmin 0;">
            <path fill="var(--text)"
              d="m1368 3037-55-10-23-6a369 369 0 0 1-57-19 552 552 0 0 1-266-246 437 437 0 0 1-31-74 590 590 0 0 1-18-245l5-25c7-35 21-77 35-105l9-19a522 522 0 0 1 679-236c1 5-1 77-3 91a1059 1059 0 0 1-24 119 274 274 0 0 1-19 53c-1 0-7-5-14-13-40-46-95-77-160-91a290 290 0 0 0-186 542 287 287 0 0 0 202 23c61-15 120-54 159-105a1108 1108 0 0 0 149-360 1296 1296 0 0 0 27-274 1164 1164 0 0 0-226-667 146 146 0 0 1-21-39l-4-9-4-11c-8-16-18-53-24-84-5-27-5-72 0-95 10-49 32-84 69-115 24-20 50-34 87-47a740 740 0 0 1 79-19c23-4 134-6 167-3a1364 1364 0 0 1 446 118l20 8 20 8 18 8a2232 2232 0 0 1 652 439 1008 1008 0 0 1 234 338c4 5 16 57 20 83 2 17 1 63-3 79-18 83-71 135-171 167-34 11-106 20-130 16-43-7-194-7-249 0-67 9-142 23-179 34l-34 10a974 974 0 0 0-94 33 1245 1245 0 0 0-170 84 1182 1182 0 0 0-405 414 529 529 0 0 1-347 244c-40 9-112 11-160 6zm1441-892 14-2c21-2 58-13 76-22 34-17 54-37 67-69 6-16 7-19 7-44 1-26 1-28-6-54-32-125-167-280-368-420-80-56-200-124-282-159l-26-12a1286 1286 0 0 0-124-47c-39-14-128-36-170-42l-18-3c-19-3-41-4-87-4-56 0-71 2-105 13-68 23-101 65-101 130a201 201 0 0 0 17 82c3 9 21 46 31 64 68 112 187 227 351 338a1827 1827 0 0 0 446 214 1084 1084 0 0 0 219 39c1 1 50-1 59-2z" />
          </svg>
          
          ytify is a resource efficient audio streaming client for YouTube & YTMusic. <a
            style="text-decoration:underline;" target="_blank" href="https://github.com/n-ce/ytify/wiki/usage">Learn
            more about how to use it effectively.</a> <a
            href="https://raw.githubusercontent.com/n-ce/Uma/main/dynamic_instances.json">Health: </a>
          <samp>⬜⬜⬜⬜</samp>
          <br>
          <br>
          [\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\]
          [NEW!] <a href="https://dev--ytify.netlify.app">preview the upcoming version of ytify</a>
          [/////////////////////////////////]
          
          <p style="font-size:smaller;margin-top:1rem">
            <img width="100" src="https://upload.wikimedia.org/wikipedia/commons/6/6f/UPI_logo.svg" />
            If you love using ytify, support it through UPI:
            <b>animesh.5383@waicici</b>, even a small amount can help.
          </p>
          <a style='text-decoration: underline;'
            href='https://en.m.wikipedia.org/wiki/Individual_action_on_climate_change' target='_blank'>What can one
            individual do to deal with climate change?</a>
        </div>
      </div>
    </section>


    <section id="library">
      <header>
        <p data-translation="nav_library">Library</p>
        <i id="syncNow" class="ri-cloud-fill"></i>

        <details>
          <summary><i class="ri-more-2-fill"></i></summary>
          <ul id="libraryActions"></ul>
        </details>

      </header>


      <div id="superCollectionSelector">
        <input type="radio" id="r.featured" name="superCollectionChips" value="featured">
        <label data-translation="library_featured" for="r.featured">Featured</label>
        <input type="radio" id="r.collections" name="superCollectionChips" value="collections">
        <label data-translation="library_collections" for="r.collections">Collections</label>
        <input type="radio" id="r.playlists" name="superCollectionChips" value="playlists">
        <label data-translation="library_playlists" for="r.playlists">Playlists</label>
        <input type="radio" id="r.albums" name="superCollectionChips" value="albums">
        <label data-translation="library_albums" for="r.albums">Albums</label>
        <input type="radio" id="r.artists" name="superCollectionChips" value="artists">
        <label data-translation="library_artists" for="r.artists">Artists</label>
        <input type="radio" id="r.channels" name="superCollectionChips" value="channels">
        <label data-translation="library_channels" for="r.channels">Channels</label>

        <input type="radio" id="r.feed" name="superCollectionChips" value="feed">
        <label data-translation="library_feed" for="r.feed">Subscription Feed</label>

        <input type="radio" id="r.for_you" name="superCollectionChips" value="for_you">
        <label data-translation="library_for_you" for="r.for_you">For You</label>

      </div>

      <div id="superCollectionList"></div>

    </section>


    <section id="list">
      <header>
        <p id="listTitle">List</p>
        <details>
          <summary><i class="ri-more-2-fill"></i></summary>
          <ul id="listTools">
            <li id="playAllBtn" data-translation-aria-label="list_play">
              <i class="ri-play-large-line"></i>
            </li>
            <li id="enqueueAllBtn" data-translation-aria-label="list_enqueue">
              <i class="ri-list-check-2"></i>
            </li>
            <li id="importListBtn" data-translation-aria-label="list_import">
              <i class="ri-import-line"></i>
            </li>
            <li id="subscribeListBtn">
              <i class="ri-stack-line" data-state="Subscribe"></i>
            </li>
            <li id="viewOnYTBtn">
              <i class="ri-external-link-line" data-state=" View on YouTube"></i>
            </li>
            <li id="clearListBtn" data-translation-aria-label="list_clear_all">
              <i class="ri-close-line"></i>
            </li>
            <li id="removeFromListBtn" data-translation-aria-label="list_remove">
              <i class="ri-indeterminate-circle-line"></i>
            </li>
            <li id="deleteCollectionBtn" data-translation-aria-label="list_delete">
              <i class="ri-delete-bin-2-line"></i>
            </li>
            <li id="renameCollectionBtn" data-translation-aria-label="list_rename">
              <i class="ri-edit-line"></i>
            </li>
            <li id="shareCollectionBtn" data-translation-aria-label="list_share">
              <i class="ri-link"></i>
            </li>
            <li id="radioCollectionBtn" data-translation-aria-label="list_radio">
              <i class="ri-radio-line"></i>
            </li>
            <li id="sortCollectionBtn" data-translation-aria-label="list_sort">
              <i class="ri-draggable"></i>
            </li>
            <li id="sortByTitleBtn" data-translation-aria-label="list_sort_title">
              <i class="ri-sort-alphabet-asc"></i>
            </li>
            <li id="sortByArtistBtn" data-translation-aria-label="list_sort_author">
              <i class="ri-sort-asc"></i>
            </li>
          </ul>
        </details>
      </header>
      <br>
      <div id="listContainer">
        <h1 data-translation="list_info">Playlist, channel or your collection items show here</h1>
      </div>
    </section>

  </main>

  <dialog id="loadingScreen">
    <i class="ri-loader-3-line"></i>
  </dialog>

  <dialog id="settings">


    <div id="actionsContainer">
      <form netlify name="feedback" method="POST">
        <textarea data-translation-placeholder="settings_feedback_placeholder" name="->" id="netlifyForm"
          required></textarea>

        <button data-translation="settings_feedback_submit" type="submit">Submit Feedback</button>

        <button data-translation="settings_clear_cache" id="clearCacheBtn" type="button">Clear Caches</button>

        <button data-translation="settings_restore" id="restoreSettingsBtn" type="button">Restore Settings</button>

        <button data-translation="settings_export" id="exportSettingsBtn" type="button">Export Settings</button>
        <button type="button">
          <label data-translation="settings_import" for="importSettingsBtn" style="cursor:pointer">Import
            Settings</label>
          <input type="file" id="importSettingsBtn" class="hide">
        </button>
      </form>

    </div>
  </dialog>

  <script src="/src/main.ts" type="module"></script>
</body>

</html>
